/* 
绝对定位
1 绝对定位 清除浮动。。。了解 
2 块级元素 宽度默认 100%
  块级元素+绝对|固定定位之后 宽度 
    由内容撑开
 */


/* sass函数-混合 */
/* jd红 */
$jd_red:#c91523;
/* sass函数 声明 */
@mixin jd_sprites($x,$y) {
  background-size: 200px 200px;
    background-image: url("../images/jd-sprites.png");
    background-position: $x $y;
  
}


/* 头部 */
header{
  height: 40px;

  background-color: rgba(201, 21, 35, 0);
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;


  /* logo */ 
  .logo{
    width: 70px;
    
    /* 使用sass函数 */
    @include jd_sprites(0,-110px);
    /* 
    增大背景图片的响应区域 h5第五天讲解  
    1 内减模式 
    2 bg-origin和bg-clip值 content-box
    3 动态增大padding 
    */
    background-origin: content-box;
    background-clip: content-box;
    padding: 10px 6px;

  }
  /* 登录 */
  .login{
    width: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
  }
  /* 搜索框 */
  .search{
    /* 设置子项占父项 剩下的  宽度的比例  */
    flex: 1;
    position: relative;
    &::before{
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      @include jd_sprites(-60px, -110px);
      top: 11px;
    left: 10px;
    }

    padding: 5px 0;
    input{
      width: 100%;
      height: 100%;
      border-radius: 15px;
      padding-left: 30px;
    }
  }
}

/* 轮播图 */
.slides{
  overflow: hidden;
  position: relative;
  // 图片
  .slides_ul{
    width: 1000%;
    display: flex;
    li{
      flex: 1;
    }
  }
  // 索引器
  .indexer{
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    li{
      float: left;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #fff;
      margin-left: 5px;
      opacity: .5;
      transition: all 0.3s;

    }
    .active{
      background-color: #fff;
      opacity: 1;
      transform: scale(1.5);
    }
  }
}


/* 首页导航 */
nav{
  display: flex;
  /* 换行 */
  flex-wrap: wrap;
  a{
   width: 25%;
   text-align: center;
   padding: 5px 0;
   color: #666;
   font-size: 14px;

  
   img{
     width: 50%;
     margin: 0 auto;
   }
  }
}

/* 掌上秒杀 */
.second_kill{
  margin-top: 5px;
  .second_kill_title{
    display: flex;
    justify-content: space-around;
    /* 闹钟 */
    .clock{
      width: 18px;
      height: 22px;

      @include jd_sprites(-83px,-110px );

    }
    /* 掌上秒杀 */
    .second_kill_name{
      /* 使用变量 */
      color: $jd_red;
    }
    /* 倒计时 */
    .timer{
      span{
        background-color: #000;
        color: #fff;
        padding: 1px;
      }
      span:nth-child(3n){
        background-color: #fff;
        color: #000;
      }
    }
    /*  超链接 */
    >a{
      font-size: 14px;
      color: $jd_red;
    }
  }
  .second_kill_content{
    display: flex;
    a{
      flex: 1;
      position: relative;
      font-size: 14px;
      text-align: center;
      >img{}
      .tips{
        background-color: #fdb60a;
        color: #fff;
        border-radius: 50%;
        padding: 3px 6px;
     
        position: absolute;
        top: 20%;
        right: 50%;
      }
      .news_price{
        color: $jd_red;
      }
      .old_price{
        color: #666;
      }

    }
  }
}


/* 主题日 */
.theme_day{
  .theme_day_title{
    position: relative;
    .banners_wrap{
      position: absolute;
      bottom: 5px;
      width: 100%;
      a{
        float: left;
        width: 50%;
      }
    }
  }
  .theme_day_content{
    display: flex;
    flex-wrap: wrap;
    a{
      width: 50%;
    }

    a:nth-child(-n+3){
      width: 33.33%;
    }
  }
}

/* 公共标题 */
.goods_title{
  color:$jd_red;
  font-weight: 600;
  padding: 5px;
}
/* 超市 */
.market{
  .market_content{
    a{
      float: left;
      width: 50%;
    }
    a:nth-child(3){
      padding-bottom: 1px;
    }
  }
}


/* 主题街 */
.theme_stree{
  .theme_stree_content{
    // display: flex;
    // flex-wrap: wrap;
    a{
      width: 25%;
      float: left;
    }
   a:nth-child(-n+2){
     width: 50%;
   }
   a:nth-child(5){
     clear: both;
   }

  }
}

.adv{
  padding: 5px;
}
/* 品牌 推荐 */
.brand{
  
  .brand_title{}
  .brand_content{
    padding: 5px;
    display: flex;
    a{
      flex: 3;
    }
    a:first-child{
      flex: 4;
    }
  }
}


/* 猜你喜欢 */
.guess{
  .guess_title{
    display: flex;
    justify-content: space-between;
    >a{
      font-weight: normal;
      font-size: 13px;

      // display: flex;
      >img{
        display: inline-block;
        width: 18px;
        // height: 18px;
        vertical-align: sub;
      }
    }
  }
  .guess_content{
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        padding: 10px;
        width: 50%;
        color: #666;
        /* 商品头部 */
        .guess_goods_title{
          display: flex;
          justify-content: space-between;
          padding: 5px 0;
          >span{
            color: $jd_red;
          }
          >a{
            border: 1px solid #ccc;
            font-size: 13px;
          }
        }
        /* 商品的详情 */
        .guess_goods_detail{
          >img{
            width: 90%;
            margin: 0 auto;
          }
          >p{
            font-size: 13px;
            overflow: hidden;
            height: 36px;
            border-bottom: 1px solid pink;
          }
        }
      }
    }
  }
}

/* 底部工具栏 */
.bottom_tool{
  margin-top: 10px;
  margin-bottom: 45px;
  background-color:#f3f5f7;
  text-align: center;
  color: #666;
  font-size: 14px;
  /* 点击加载更多 */
  .more{
    border-top: 1px solid currentColor;
    padding: 10px 0;
  }
  /* 底部链接 */
  .btm_link{
    padding: 10px 0;
    display: flex;
    border-top: 1px solid currentColor;
    a{
      flex: 1;
      border-left: 1px solid #000;
    }
    a:nth-child(1){
      border-left:none;
    }
  }
  /* 设备 */
  .btm_devices{
    border-top: 1px solid currentColor;
    padding: 10px 0;
    display: flex;
    a{
      flex: 1;
      span{
        width: 33px;
        height: 33px;
        display: inline-block;
      
      }
      p{}
    }
    a:nth-child(1){
      span{
        @include jd_sprites(-120px, -70px);
      }
    }
    a:nth-child(2){
      span{
        @include jd_sprites(-40px, -70px);
      }
    }
    a:nth-child(3){
      span{
        @include jd_sprites(-80px, -70px);
      }
    }
  }

  /* 版权所有 */
  .copyright{
    border-top: 1px solid currentColor;
    padding: 10px 0;
  }
}

/* 尾部导航 */
footer{
  display: flex;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  a{
    flex: 1;
    img{
      // display: block;
      // width: 100%;

      width: 64px;
      height: 50px;
      margin: 0 auto;
    }
  }
}
